<template>
  <div class="HeadPortrait" :class="{grayscale:grayscale=='Offline'}"></div>
</template>

<script>
  export default {
    name: 'HeadPortrait',
    props: {
      grayscale: String
    }
  }
</script>

<style scoped lang="scss">
      .HeadPortrait{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid #999;
        background:url("../assets/headportrait.jpg") no-repeat center;
        background-size: 100% 100%;
      }
      .grayscale{
        filter: grayscale(100%);
      }
</style>
